<template>
  <view class="page-container">
    <!-- 订单操作 -->
    <view class="card mb-32">
      <view class="section-box">
        <view class="section-title">订单操作</view>
        <view class="divider"></view>
        <view class="section-main flex">
<!--              v-if="leaseStatus[nowItem._status] === 'lease'"-->
          <view
              @click="confirmReturn"
              class="mr-20 btn-default btn-blue"
          >
            确认归还
          </view>
<!--              v-if="leaseStatus[nowItem._status] === 'not_receive'"-->
          <view
              class="mr-20 btn-default btn-blue"
              @click="completeOrder"
          >
            完结订单
          </view>
<!--              v-if="leaseStatus[nowItem._status] === 'lease'"-->
          <view
              class="mr-20 btn-default btn-blue"
              @click="buyoutOrder"
          >
            买断订单
          </view>
        </view>
      </view>
    </view>
    <!-- 租赁数据 -->
    <view class="card mb-32" v-if="leaseData">
      <view class="section-box">
        <view class="section-title">租赁数据</view>
        <view class="divider"></view>
        <view class="section-main" v-if="leaseData.buyout || leaseData.relet || leaseData.return">
          <!-- 买断信息 -->
          <view class="item mb-20" v-if="leaseData.buyout">
            <view class="section-second-title">买断信息</view>
            <view class="info-box mt-16">
              状态：{{ leaseData.buyout.status_text || '-' }}
            </view>
          </view>
          <!-- 续租信息 -->
          <view class="item mb-20" v-if="leaseData.relet">
            <view class="section-second-title">续租信息</view>
            <view class="info-box mt-16">
              状态：{{ leaseData.relet.status_text || '-' }}
            </view>
          </view>
          <!-- 归还信息 -->
          <view class="item mb-20" v-if="leaseData.return">
            <view class="section-second-title">归还信息</view>
            <view class="info-box mt-16">
              <view>状态：{{ leaseData.return.status_text || '-' }}</view>
              <view>
                归还方式：{{ deliveryTypeList[leaseData.return.return_delivery_type] || '-' }}
              </view>
              <view v-if="leaseData.return.return_delivery_type === 1">
                快递公司：{{ leaseData.return.return_delivery_name || '-' }}
              </view>
              <view v-if="leaseData.return.return_delivery_type === 1">
                快递单号：{{ leaseData.return.return_delivery_id || '-' }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 货损赔付单 -->
    <view class="card" v-if="orderDamage">
      <view class="section-box">
        <view class="section-title">货损赔付单</view>
        <view class="divider"></view>
        <view class="section-box">
          <view
              @click="openAdd"
              class="mb-20 mr-20 btn-default btn-blue"
          >
            {{ orderDamage.id ? "编辑赔付单" : "新增赔付单" }}
          </view>
          <view
              v-if="orderDamage.id"
              @click="delOrderDamage"
              class="mb-20 mr-20 btn-default btn-blue"
          >
            删除赔付单
          </view>
          <view v-if="orderDamage.id">
            <view class="description-item">
              <view class="description-label">赔付金额：</view>
              <view class="description-value">{{ orderDamage.amount || '-' }}</view>
            </view>
            <view class="description-item">
              <view class="description-label">发货视频/图片：</view>
              <view class="flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in orderDamage.delivery_voucher || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                </view>
              </view>
            </view>
            <view class="description-item">
              <view class="description-label">签收定损视频/图片：</view>
              <view class="flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in orderDamage.take_voucher || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                </view>
              </view>
            </view>
            <view class="description-item">
              <view class="description-label">修补费用证明图片：</view>
              <view class="flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in orderDamage.repair_cost_img || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                </view>
              </view>
            </view>
            <view class="description-item">
              <view class="description-label">备注：</view>
              <view class="description-value">{{ orderDamage.remark || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 新增/编辑赔付单弹窗 -->
    <uni-popup ref="addPopModel" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">
          {{ addType === 'add' ? '新增赔付单' : '编辑赔付单' }}
        </view>
        <view class="content">
          <form :label-width="136">
            <view class="form-item">
              <label class="form-label">赔付金额：</label>
              <input v-model="addForm.amount" placeholder="请输入金额" type="number" />
            </view>
            <view class="form-item">
              <label class="form-label">发货视频/图片：</label>
              <view class="form-control flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in addForm.delivery_voucher || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                  <!-- 删除按钮 -->
                  <uni-button
                      shape="circle"
                      @click="handleRemove(index, 'delivery_voucher')"
                      class="btndel"
                  >
                    <text>×</text>
                  </uni-button>
                </view>
                <!-- 添加图片 -->
                <view
                    class="upLoad acea-row row-center-wrapper"
                    @click="modalPicTap('duo', 'delivery_voucher')"
                >
                  <text>+</text>
                </view>
              </view>
            </view>
            <view class="form-item">
              <label class="form-label">签收定损视频/图片：</label>
              <view class="form-control flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in addForm.take_voucher || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                  <!-- 删除按钮 -->
                  <uni-button
                      shape="circle"
                      @click="handleRemove(index, 'take_voucher')"
                      class="btndel"
                  >
                    <text>×</text>
                  </uni-button>
                </view>
                <!-- 添加图片 -->
                <view
                    class="upLoad acea-row row-center-wrapper"
                    @click="modalPicTap('duo', 'take_voucher')"
                >
                  <text>+</text>
                </view>
              </view>
            </view>
            <view class="form-item">
              <label class="form-label">修补费用证明图片：</label>
              <view class="form-control flex">
                <!-- 图片列表 -->
                <view
                    class="pictrue"
                    v-for="(item, index) in addForm.repair_cost_img || []"
                    :key="index + 'img'"
                >
                  <image :src="item" mode="aspectFill"></image>
                  <!-- 删除按钮 -->
                  <uni-button
                      shape="circle"
                      @click="handleRemove(index, 'repair_cost_img')"
                      class="btndel"
                  >
                    <text>×</text>
                  </uni-button>
                </view>
                <!-- 添加图片 -->
                <view
                    class="upLoad acea-row row-center-wrapper"
                    @click="modalPicTap('duo', 'repair_cost_img')"
                >
                  <text>+</text>
                </view>
              </view>
            </view>
            <view class="form-item">
              <label class="form-label">备注：</label>
              <input
                  type="textarea"
                  v-model="addForm.remark"
                  :autosize="{ minRows: 5, maxRows: 5 }"
                  placeholder="请输入备注"
                  class="flex-1 pl-20 fs-26"
                  placeholder-class="text--w111-ccc"
              />
            </view>
          </form>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeAdd">取消</view>
          <view class="btn confirm" @click="saveOrderDamage">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { leaseStatus } from "@/utils/order";
import {
  buyoutOrder,
  completeOrder,
  confirmReturn, delOrderDamage,
  getAdminOrderDetail,
  getAdminRefundDetail, getLeaseManage,
  getOrderDamage,
  getStoreOrderDetail,
  getStoreRefundDetail, saveOrderDamage
} from "@/api/admin";

export default {
  computed: {
    leaseStatus() {
      return leaseStatus;
    }
  },
  data() {
    return {
      order_id:'',
      statusType:'',
      nowItem: {},
      show: true,
      loading: true,
      addShow: false,
      orderDamage: {},
      addType: "add",
      addFormOrigin: {},
      addForm: {
        oid: '',
        amount: "",
        delivery_voucher: [],
        take_voucher: [],
        repair_cost_img: [],
        remark: ""
      },
      // 选择图片
      imgType: "",
      modalPic: false,
      isChoice: "",
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      // 归还商品
      returnShow: false,
      returnForm: {
        delivery_type: "",
        delivery_name: "",
        delivery_id: ""
      },
      deliveryTypeList: {
        '1': "快递",
        '2': "到店",
        '3': "其他"
      },
      expressList: [],
      leaseData: {}
    };
  },
  watch: {
    show() {
      if (!this.show) {
        this.$emit("close");
        this.$emit("refresh");
      }
    }
  },
  onLoad(options) {
    this.addFormOrigin = JSON.parse(JSON.stringify(this.addForm));
    // this.getIndex();
    // this.getList();

    if(options.order_id){
      this.statusType=options.statusType
      this.order_id=options.order_id
      this.getIndex()
    }
  },
  methods: {
    getIndex: function() {
      let that = this;
      let obj = '';
      if (that.statusType == -3) {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminRefundDetail(that.order_id);
        }else{
          funApi = getStoreRefundDetail(that.order_id);
        }
        obj = funApi;
      } else {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminOrderDetail(that.order_id);
        }else{
          funApi = getStoreOrderDetail(that.order_id);
        }
        obj = funApi;
      }
      // uni.showLoading({
      //   title: '加载中',
      // })
      obj.then(res => {
        // uni.hideLoading()
        that.nowItem = res.data;
        that.addForm.oid = that.nowItem.id;
        that.getOrderDamage();
        that.getLeaseManage();
      })
    },
    // 打开选择图片弹窗
    modalPicTap(tit, type) {
      this.modalPic = true;
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.imgType = type;
      this.uploadpic()
    },
    // 处理选择的图片
    getPicD(imgs) {
      imgs.map((item) => {
        this.addForm[this.imgType].push(item.att_dir);
      });
      this.modalPic = false;
    },
    // 删除图片
    handleRemove(i, type) {
      this.addForm[type].splice(i, 1);
    },
    // 归还商品
    returnGoods() {
      setTimeout(() => {
        this.returnShow = false;
        uni.showToast({
          title: '操作成功',
          icon: 'success'
        });
        this.getIndex();
      }, 500);
    },
    // 收到商品
    confirmReturn() {
      uni.showModal({
        title: '提示',
        content: '确认收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            confirmReturn(this.nowItem.id).then((res) => {
              if (res.status === 200) {
                uni.showToast({
                  title: '操作成功',
                  icon: 'success'
                });
                this.getIndex();
              }
            });
          }
        }
      });
    },
    // 物流公司列表
    getList() {
      setTimeout(() => {
        this.expressList = mockExpressData;
      }, 500);
    },
    openAdd(){
      this.$refs.addPopModel.open()
    },
    closeAdd(){
      this.$refs.addPopModel.close()
    },
    // 赔付单
    getOrderDamage() {
      getOrderDamage(this.nowItem.id).then((res) => {
        if (res.status == 200) {
          this.orderDamage = res.data;
          if (this.orderDamage.id) {
            Object.keys(this.addForm).forEach((key) => {
              this.addForm[key] = this.orderDamage[key];
            })
            this.addForm=JSON.parse(JSON.stringify(this.addForm))
          }
        }
      });
    },
    // 保存赔付单
    saveOrderDamage() {
      let id = this.orderDamage.id ? this.orderDamage.id : 0;
      saveOrderDamage(id, this.addForm).then((res) => {
        if (res.status == 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          this.closeAdd()
          this.getOrderDamage();
        }
      });
    },
    // 删除赔付单
    delOrderDamage() {
      uni.showModal({
        title: '提示',
        content: '确认删除赔付单吗？',
        success: (res) => {
          if (res.confirm) {
            delOrderDamage(this.orderDamage.id).then((res) => {
              if (res.status == 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
                this.addForm = JSON.parse(JSON.stringify(this.addFormOrigin));
                this.getOrderDamage();
                this.getIndex()
              }
            });
          }
        }
      });
    },
    // 租赁数据
    getLeaseManage() {
      getLeaseManage(this.nowItem.id).then((res) => {
        if (res.status == 200) {
          this.leaseData = res.data;
        }
      });
    },
    // 完结订单
    completeOrder() {
      uni.showModal({
        title: '提示',
        content: '确认完结订单吗？',
        success: (res) => {
          if (res.confirm) {
            completeOrder(this.nowItem.id).then(res=>{
              if(res.status==200){
                uni.showToast({
                  title: '操作成功',
                  icon: 'success'
                });
                this.getIndex();
              }
            })
          }
        }
      });
    },
    // 买断订单
    buyoutOrder() {
      uni.showModal({
        title: '提示',
        content: '确认买断订单吗？',
        success: (res) => {
          if (res.confirm) {
            buyoutOrder(this.nowItem.id).then(res=>{
              if(res.status==200){
                uni.showToast({
                  title: '操作成功',
                  icon: 'success'
                });
                this.getIndex();
              }
            })
          }
        }
      });
    },

    // 上传图片
    uploadpic: function() {
      let that = this;
      this.canvasStatus = true
      that.$util.uploadImageChange('upload/image', (res) => {
        this.addForm[this.imgType].push(res.data.url);
      });
    },
  }
};
</script>

<style lang="less" scoped>
.page-container {
  padding: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-second-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.info-box {
  padding-left: 10px;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  image {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  text-align: center;
  font-size: 24px;
  color: #999;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mr-20 {
  margin-right: 20px;
}

.description-item {
  display: flex;
  margin-bottom: 10px;
}

.description-label {
  width: 130px;
  font-weight: bold;
}

.description-value {
  flex: 1;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.divider{
  border-bottom: 1rpx solid  #eee;
  margin: 50rpx 0;
}
</style>